<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="modalListVisible"
    @ok="submitOk"
    @cancel="modalListVisible=false"
    cancelText="关闭"
  >

    <a-form :form="form">
      <a-form-item
        label="医生姓名"
        :required="true"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        validateStatus="success"
        hasFeedback
      >
        <a-input  v-model="doctor.name" />
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="性别" hasFeedback>
        <a-select v-model="doctor.sex">
          <a-select-option value="1">男</a-select-option>
          <a-select-option value="2">女</a-select-option>
        </a-select>

      </a-form-item>
      <a-form-item
        label="身份证号"
        :required="true"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        hasFeedback
        validateStatus="success">

        <a-input v-model="doctor.idCard" />
      </a-form-item>
      <a-form-item
        label="所在地区"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        prop="share"
        :data="loadData"
        placeholder="Please select"
        change-on-select
      >
        <a-cascader :options="options" placeholder="地区区域" v-model="defaultPath" @change="onChange"></a-cascader>

      </a-form-item>
      <a-form-item
        label="医疗机构"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        prop="share"
        required
        hasFeedback
      >
        <a-input  v-model.number="doctor.hospital" />
      </a-form-item>
      <a-form-item
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        label="职称"
        hasFeedback
        validateStatus="warning"
      >
        <a-select v-model="doctor.title">
          <a-select-option value="主任医师">主任医师</a-select-option>
          <a-select-option value="副主任医师">副主任医师</a-select-option>
          <a-select-option value="主治医师">主治医师</a-select-option>
          <a-select-option value="住院医师">住院医师</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="科室" hasFeedback>
        <a-select v-model="doctor.departmentName">
          <a-select-option value="妇科">妇科</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="个人简介">
        <a-textarea :rows="5"  placeholder="..." id="describe" v-model="doctor.introduction"></a-textarea>
      </a-form-item>
      <a-form-item  :labelCol="labelCol" :wrapperCol="wrapperCol" label="擅长">
        <a-button type="primary" @click="showDrawer"> <a-icon type="plus" /> Open</a-button>

        <a-drawer
          title="选择"
          placement="right"
          :closable="false"
          :visible="modalVisible"
          :get-container="false"
          :wrap-style="{ position: 'absolute' }"
          @close="onClose"
        >
          <p>的</p>


        </a-drawer>


      </a-form-item>






    </a-form>


    <!--    <doctot-goob-modal ref="doctorGoobModal"></doctot-goob-modal>-->

    <doctor-modal ref="modalForm" @ok="modalFormOk"></doctor-modal>

  </a-modal>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import Ellipsis from '@comp/Ellipsis'
import { cloneObject, pushIfNotExist } from '@/utils/util'
import { getAction } from '@api/manage'
import JeecgDemoModal from '../../jeecg/modules/JeecgDemoModal'
import JeecgDemoTabsModal from '../../jeecg/modules/JeecgDemoTabsModal'

export default {
name: "DoctorComponentModal",

  inject: ['reload'],

  components: {
    JeecgDemoModal,
    JSuperQuery,
    JeecgDemoTabsModal,
    JCheckbox,
    JSelectPosition,
    DoctorGoobModal,
    DoctorInfo,
  },

  data() {
    return {
      title: '医生编辑',
      modalListVisible: false,
      modalVisible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      defaultPath:[ ],
      options: [
        {
          value: ' ',
          label: ' ',
          children: [
            {
              value: ' ',
              label: ' ',
            },
          ],
        },
      ],
      // modal: {
      //   title: '这里是标题',
      //   visible: false,
      //   fullscreen: true,
      //   switchFullscreen: true,
      // },

      doctor:{},

      department:[
        {
          id:'',
          img:'',
          name:'',
          parentId:'',
          sort:'',
        }
      ],
      show:true,//根据菜单类型，动态显示隐藏表单元素

      form: this.$form.createForm(this),
      url: {
        doctorEditInfo:  "/doctor/doctor/doctorEditInfo",
        department:"/doctor/doctor/department",
        // goodInfo:"/doctor/doctor/goodInfo",
        cityTnfo:"/doctor/doctor/cityInfo",

      },
    }
  },
  created() {
    this.showDoctor();
    this.current = this.list[0].id;
    this.handleDoctorInfo(this.$route.params.id);
  },
  methods: {

    showDoctor(record) {
      let param = {};
      param.id = record.id;

      getAction(this.url.doctorEditInfo, param).then(res => {

        this.doctor = res.result;

        this.defaultPath[0] = res.result.provinceId;
        this.defaultPath[1] = res.result.cityId;
      })

      getAction(this.url.cityTnfo, param).then(res => {

        this.options= res.result;
      })

      this.modalListVisible = true
    },



    afterVisibleChange(val) {
      console.log(' modalVisible', val);
    },
    showDrawer() {
      this. modalVisible = true;
    },
    onClose() {
      this. modalVisible = false;
    },

    // handleDoctorInfo(){
    // let param = {};
    // param.id = record.id;

    // let id =this.doctor.id
    // console.log(doctor)

    // return;
    // this.$router.push({
    //   name: '/DoctorInfo',
    //   path: '/DoctorInfo',
    //   params: {
    //     id: id
    //   }
    // })
    // },

    //测试










    // submitOk () {
    //   // putAction(this.url.list, this.doctor).then((res)=>{
    //   //
    //   //   if(res){
    //   //     this.$message.success(res.message)
    //   //     this.reload()
    //   //   }else{
    //   //     this.$message.warning(res.message)
    //   //
    //   //   }
    //   //
    //   // }).catch((error)=>{
    //   //   console.log(error);
    //   // })
    //
    //   this.modalListVisible = true;
    //
    // },

  }
}
</script>

<style scoped>
  #components-a-popconfirm-demo-placement .ant-btn {
    width: 70px;
    text-align: center;
    padding: 0;
    margin-right: 8px;
    margin-bottom: 8px;
  }
</style>